<template>
    <div>
        <el-button type="primary">选择食材</el-button>
        <p>合计采购品种数0，采购成本0.00元</p>
        <div class="centen">
            <span class="span">请输入备注：</span>
            <textarea v-model="form.remarks" class="textarea"></textarea>
        </div>
        <div class="centen">
            期望到货日期 
            <el-date-picker
                v-model="form.receiveTime"
                type="date"
                placeholder="Pick a day"
                :disabled-date="disabledDate"
                :shortcuts="shortcuts"
                :size="size"
            />
            <div class="btn">
                <el-button @click="back">返回</el-button> 
                <el-button type="primary">保存</el-button>
                <el-button type="primary" @click="submit">保存并提交</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { addCompany} from '../../apis/purchase/purchase'
import type { addPrems } from "../../apis/purchase/type";

// 定义 size
const size = ref<'default' | 'large' | 'small'>('default')

// 初始化 form，补充 addPrems 所需的所有字段
const form = reactive<addPrems>({
    id: 0, 
    companyId: 0, 
    addTime: '',
    addAccountId: 0, 
    remarks: '',
    receiveTime: '',
    foods: [{
        id:             0,
        purchaseId:     0,
        foodName:       '',
        unit:          '',
        supplierId:     0,
        wholePrice:     0,
        sellPrice:      0,
        purchasePrice:  0,
        purchaseCounts: 0,
        receiveCounts:  0,
        supplierName:   null,
    }],
    
})

// 提交逻辑
const submit = () => {
    

    addCompany(form).then(res => {
        console.log(res)
    }).catch(err => {
        console.error('提交失败:', err)
    })
}

// 返回逻辑
const back = () => {
    window.history.back()
}

// 快捷方式配置
const shortcuts = [
    {
        text: 'Today',
        value: new Date(),
    },
    {
        text: 'Yesterday',
        value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            return date
        },
    },
    {
        text: 'A week ago',
        value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            return date
        },
    },
]

// 禁用未来日期
const disabledDate = (time: Date) => {
    return time.getTime() > Date.now()
}
</script>

<style scoped>
.btn {
    margin-top: 30px;
    margin-left: 60%;
    transform: translate(-50%);
}
.span {
    position: absolute;
    top: 20px;
}
.textarea {
    position: absolute;
    left: 100px;
    height: 50px;
    margin-top: 20px;
}
.centen {
    position: relative;
    height: 100px;
}
</style>